<script lang="ts" setup="">
import { reactive, ref, watch } from 'vue'
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue'

const checked1 = ref<boolean>(false)
const checked2 = ref<boolean>(false)

const state = reactive({
	indeterminate: true,
	checkAll: false,
	checkedList: ['Apple', 'Orange'],
})

const plainOptions = ['Apple', 'Pear', 'Orange']
const onCheckAllChange = (e: any) => {
	Object.assign(state, {
		checkedList: e.target.checked ? plainOptions : [],
		indeterminate: false,
	})
}
watch(
	() => state.checkedList,
	val => {
		state.indeterminate = !!val.length && val.length < plainOptions.length
		state.checkAll = val.length === plainOptions.length
	},
)

const switch1 = ref<boolean>(false),
	switch2 = ref<boolean>(false),
	switch3 = ref<boolean>(false),
	switch4 = ref<boolean>(false),
	switch5 = ref<boolean>(false)
</script>

<template>
	<div>
		<a-divider>按钮</a-divider>
		<div>
			<a-space :size="20">
				<a-button type="primary">基础按钮</a-button>
				<a-button>默认按钮</a-button>
				<a-button type="dashed">虚线按钮</a-button>
				<a-button type="text">文本按钮</a-button>
				<a-button type="link">类a链接按钮</a-button>
			</a-space>
		</div>
		<div class="mt-4">
			<a-space :size="20">
				<a-button type="primary" disabled>基础按钮（不可用）</a-button>
				<a-button disabled>默认按钮（不可用）</a-button>
				<a-button type="dashed" disabled>虚线按钮（不可用）</a-button>
				<a-button type="text" disabled>文本按钮（不可用）</a-button>
				<a-button type="link" disabled>类a链接按钮（不可用）</a-button>
			</a-space>
		</div>
		<div class="mt-4">
			<a-space :size="20">
				<a-button type="primary" loading>基础按钮（加载中）</a-button>
				<a-button loading>默认按钮（加载中）</a-button>
				<a-button type="dashed" loading>虚线按钮（加载中）</a-button>
				<a-button type="text" loading>文本按钮（加载中）</a-button>
				<a-button type="link" loading>类a链接按钮（加载中）</a-button>
			</a-space>
		</div>
		<div class="mt-4">
			<a-space :size="20">
				<a-button type="primary" danger>基础按钮（危险状态）</a-button>
				<a-button danger>默认按钮（危险状态）</a-button>
				<a-button type="dashed" danger>虚线按钮（危险状态）</a-button>
				<a-button type="text" danger>文本按钮（危险状态）</a-button>
				<a-button type="link" danger>类a链接按钮（危险状态）</a-button>
			</a-space>
		</div>
		<div class="mt-4">
			<a-space :size="20">
				<a-button type="primary" shape="default">默认形状</a-button>
				<a-button type="primary" shape="circle">圆形</a-button>
				<a-button type="primary" shape="round">椭圆</a-button>
			</a-space>
		</div>
		<div class="mt-4">
			<a-space direction="vertical" style="width: 100%">
				<a-button type="primary" block>占满宽度</a-button>
				<a-button type="primary" danger block>占满宽度</a-button>
				<a-button type="primary" disabled block>占满宽度</a-button>
			</a-space>
		</div>
		<a-divider>多选框</a-divider>
		<div>
			<a-checkbox v-model:checked="checked1">Checkbox</a-checkbox>
		</div>
		<div class="mt-4">
			<a-checkbox v-model:checked="checked2" disabled
				>Checkbox
			</a-checkbox>
			<a-button class="ml-10" @click="checked2 = !checked2"
				>改状态
			</a-button>
		</div>
		<div class="mt-4">
			<a-checkbox
				v-model:checked="state.checkAll"
				:indeterminate="state.indeterminate"
				@change="onCheckAllChange"
			>
				Check all
			</a-checkbox>
			<a-checkbox-group
				v-model:value="state.checkedList"
				:options="plainOptions"
			/>
		</div>
		<a-divider>开关</a-divider>
		<div>
			<a-space>
				<a-switch v-model:checked="switch1" />
				<a-switch v-model:checked="switch2" size="small" />
			</a-space>
		</div>
		<div class="mt-4">
			<a-space>
				<a-switch v-model:checked="switch1" loading />
				<a-switch v-model:checked="switch2" loading size="small" />
			</a-space>
		</div>
		<div class="mt-4">
			<a-space>
				<a-switch v-model:checked="switch1" disabled />
				<a-switch v-model:checked="switch2" disabled size="small" />
			</a-space>
		</div>
		<div class="mt-4 flex">
			<a-space>
				<a-switch
					v-model:checked="switch3"
					checked-children="开"
					un-checked-children="关"
				/>
				<br />
				<a-switch
					v-model:checked="switch4"
					checked-children="1"
					un-checked-children="0"
				/>
				<br />
				<a-switch v-model:checked="switch5">
					<template #checkedChildren>
						<check-outlined />
					</template>
					<template #unCheckedChildren>
						<close-outlined />
					</template>
				</a-switch>
			</a-space>
		</div>
	</div>
</template>
